<template>
  <!--
      作者：luoyiming
      时间：2020-06-01
      描述：广告-添加
    -->
  <div class="product-add pb50">
    <!--添加广告-->
    <el-form size="small" :model="form" ref="form" label-width="100px">
      <div class="common-form">添加招聘海报</div>
      <el-form-item label="指定地区" :rules="[{ required: true, message: '请选择地区', trigger: 'blur' }]">
        <el-cascader
          v-model="form.region_id"
          :options="regions"
          :props="{value:'id',label:'name' }"
          clearable>
        </el-cascader>
      </el-form-item>
      <el-form-item label="招聘海报名称" prop="name" :rules="[{ required: true, message: '请输入招聘海报名称' }]">
        <el-input v-model="form.name" placeholder="请输入招聘海报名称" class="max-w460"></el-input>
      </el-form-item>
      <!--      <el-form-item label="二维码" prop="qr_code" :rules="[{ required: true, message: '请上传图片' }]">-->
      <!--        <div>-->
      <!--          <el-button type="primary" @click="openUpload('qr_code')">上传图片</el-button>-->
      <!--          <img :src="form.qr_code" class="mt10" width="120px" v-if="form.qr_code"/>-->
      <!--          &lt;!&ndash;上传图片组件&ndash;&gt;-->
      <!--        </div>-->
      <!--      </el-form-item>-->
      <el-form-item label="海报图" prop="bg_image" :rules="[{ required: true, message: '请上传图片' }]">
        <div>
          <el-button type="primary" @click="openUpload('bg_image')">上传图片</el-button>
          <img :src="form.bg_image" class="mt10" width="120px;" v-if="form.bg_image"/>
        </div>
      </el-form-item>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>

      </div>
    </el-form>
    <Upload v-if="isupload" :isupload="isupload" @returnImgs="returnImgsFunc">上传图片</Upload>
  </div>
</template>

<script>

import Upload from '@/components/file/Upload';
import Setlink from '@/components/setlink/Setlink';
import * as EmployApi from "@/api/employ.js";
import SupplierApi from "@/api/supplier";

export default {
  components: {
    /*图片上传*/
    Upload: Upload,
    Setlink
  },
  data() {
    return {
      /*是否上传图片*/
      isupload: false,
      is_linkset: false,
      isImg: false,
      path: '',
      tips_Id: '',
      /*form表单数据*/
      form: {
        name: '',
        qr_code_id: 0,
        qr_code: '',
        bg_image: '',
        bg_image_id: 0,
      },
      /*广告类别*/
      catgory: [],
      loading: false,
      upload_type: "qr_code",
      regions: []
    };
  },

  created() {
    this.getRegions();
  },
  methods: {
    getRegions() {
      let self = this;
      SupplierApi.getCityList({}, true)
        .then(res => {
          self.regions = [];
          Object.keys(res.data.regions).forEach((key) => {
            self.regions.push(res.data.regions[key]);
          });
        }).catch(error => {

      });
    },

    openUpload(e) {
      this.upload_type = e;
      this.isupload = true;
    },

    /*获取图片*/
    returnImgsFunc(e) {
      this.isupload = false;
      console.log(e[0]);
      if (e != null && e.length > 0) {
        if (this.upload_type == 'qr_code') {
          this.form.qr_code = e[0].file_path;
          this.form.qr_code_id = e[0].file_id;
        }
        if (this.upload_type == 'bg_image') {
          this.form.bg_image = e[0].file_path;
          this.form.bg_image_id = e[0].file_id;
        }
      }
    },


    /*添加广告*/
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate(valid => {
        if (valid) {
          self.loading = true;
          EmployApi.addPoster(form, true)
            .then(data => {
              self.loading = false;
              self.$message({
                message: data.msg,
                type: 'success'
              });
              self.$router.push('/employ/poster');
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*取消添加，返回广告列表*/
    cancelFunc() {
      this.$router.back();
    }
  }
};
</script>

<style>
.edit_container {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.ql-editor {
  height: 400px;
}
</style>
